<template>
   <div class="login-container">
            <div class="login-box">
                <p class="login-title">访客管理系统</p>
                <el-form id ="login-form" label-form="100px"> 
                     <el-form-item> 
                        <el-input placeholder="用户名"/>
                         <span class="login-icon"><i class="iconfont icon-accountfilling"></i></span>
                      </el-form-item>
                      <el-form-item>
                          <el-input placeholder="密码"/>
                            <span class="login-icon"><i class="iconfont icon-password"></i></span>
                      </el-form-item>
                       <el-form-item>
                          <el-button type="primary" style="width:100%" @click="goIndex()">登录</el-button>
                      </el-form-item>
                  </el-form>
            </div>
            <div class="video-container">
              <div :style="fixStyle" class="filter"></div>
                <video :style="fixStyle" autoplay loop v-on:canplay="canplay">
                    <source src="../assets/It-Snowed.mp4" type="video/mp4"/>
                    浏览器不支持 video 标签，建议升级浏览器。
                    <source src="../assets/It-Snowed.webm" type="video/webm"/>
                    浏览器不支持 video 标签，建议升级浏览器。
                </video>
                <div class="poster hidden" v-if="!vedioCanPlay">
                    <img :style="fixStyle" src="PATH_TO_JPEG" alt="">
                </div>   
            </div>
   </div>
</template>
<script>
export default {
   name: 'login',
    data() {
      return {
        vedioCanPlay: false,
        fixStyle: ''
      }
    },
    methods: {
      canplay() {
        this.vedioCanPlay = true
      },
      goIndex(){
        this.$router.push('main');
      }
    },
    mounted: function() {
      window.onresize = () => {
        const windowWidth = document.body.clientWidth
        const windowHeight = document.body.clientHeight
        const windowAspectRatio = windowHeight / windowWidth
        let videoWidth
        let videoHeight
        if (windowAspectRatio < 0.5625) {
          videoWidth = windowWidth
          videoHeight = videoWidth * 0.5625
          this.fixStyle = {
            height: windowWidth * 0.5625 + 'px',
            width: windowWidth + 'px',
            'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
            'margin-left': 'initial'
          }
        } else {
          videoHeight = windowHeight
          videoWidth = videoHeight / 0.5625
          this.fixStyle = {
            height: windowHeight + 'px',
            width: windowHeight / 0.5625 + 'px',
            'margin-left': (windowWidth - videoWidth) / 2 + 'px',
            'margin-bottom': 'initial'
          }
        }
      }
      window.onresize()
    }
  }


</script>

<style lang="scss" >
    .login-container{
      position: absolute;
       width: 100%;
       height: 100%;
       overflow: hidden;
        background: rgba(0, 0, 0, 0.0);
    }
    .login-box{
        display: flex;
        flex-flow: column nowrap;
        position: absolute;
        z-index:3;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        align-items:center;
        justify-content: center;
        .el-input {
            input {
                padding-left: 25px;
            }
        }
       
        .login-icon{
          top:0px;
          padding-left: 5px;
          position: absolute;
          display: inline-block;
        }
    }
   
   .video-container{
      position: absolute;
      z-index:2;
      width:100%;
      height: 100%;
   }
   
   #login-form{
     width:300px;
    //  margin: 0 auto;
    
   }

  .video-container .poster img,
  .video-container video {
    z-index: 2;
    position: absolute;
  }

  .video-container .filter {
    z-index: 2;
    position: absolute;
    background: rgba(0, 0, 0, 0.2);
  } 
   
  .login-title{
    font:normal  bold 60px arial,sans-serif;
    color: white;
    bottom: 100px;
  }
 
 
</style>
